<template>
	<view class="content">
		<u-navbar title="圈子" :placeholder='true' left-icon=" " height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="false">
		</u-navbar>
		<view class="article_list">
			<view class="article_content">
				<template v-for="(item,index) in circleList">
					<view class="article_item" :key="index">
						<view class="user_info">
							<view class="user_hade">
								<image :src="item.avatar"></image>
							</view>
							<view class="user_right">
								<view class="username">
									{{item.nickName}}
								</view>
								<view class="time">
									{{item.createTime}}
								</view>
							</view>
							<!-- <view class="del">
								<button @click="delCircleInfo(item)">删除</button>
							</view> -->
						</view>

						<view class="article_bttom">
							<view class="article_text">
								{{item.text}}
							</view>
							<view class="article_image" v-if='item.other.length!=0'>
								<template v-for="(image,index) in item.other.split(',')">
									<view class="image_item" :key="index">
										<image :src="image?image:''" mode=""></image>
									</view>
								</template>
							</view>
							<view class="user_location">
								<image src="../../static/images/factionalism/Frame-2@2x.png" mode=""></image>
								<text>{{item.loca}}</text>
							</view>

							<view class="relevance_goods">
								<view class="relevance">
									<image src="../../static/images/factionalism/Group 69@2x.png" mode=""></image>
									<view class="goods_name">
										{{item.commodityName}}
									</view>
								</view>
							</view>
							<view class="article_operation">
								<view class="operation_item">
									<image src="../../static/images/factionalism/Frame@2x.png" mode=""></image>
									分享赚钱
								</view>
								<view class="operation_item" @click="comment(item)">
									<image src="../../static/images/factionalism/消息@2x.png" mode=""></image>
									{{item.comments.length}}
								</view>
								<view class="operation_item" @click="like(item)">
									<image src="../../static/images/factionalism/Frame@2x (1).png" mode=""></image>
									{{item.follow}}
								</view>
							</view>
							<view class="all_article" v-if="item.comment!=0&&item.comments[0]">
								<view class="title">
									全部评论（{{item.comments.length}}）
								</view>
								<view class="comment_list" :style="item.heightType+':'+item.height+';'">
									<template v-for="(commentitem,index) in item.comments">
										<view class="comment_item" :key="index">
											<view class="comment_user_info">
												<view class="comment_user_image">
													<image :src="commentitem.other" mode=""></image>
												</view>
												<view class="comment_user_name">
													{{commentitem.commentNickName}}
												</view>
												<!-- <view class="comment_user_gender">
													<image src="../../static/images/factionalism/Component 1@2x.png" mode=""></image>
												</view> -->
											</view>
											<view class="comment_content">
												{{commentitem.commentAnswer}}
											</view>
											<view class="comment_time">
												<view class="time">
													{{commentitem.createTime.join()}}
												</view>
											</view>
											<!-- 	<view class="reply">
												回复
											</view> -->

										</view>
									</template>
									<!-- 	<view class="reply_comment">
										<view class="comment_user_info">
											<view class="comment_user_image">
												<image src="../../static/images/factionalism/user_hadeimg.jpg" mode=""></image>
											</view>
											<view class="comment_user_name">
												小水
											</view>
											<view class="comment_user_gender">
												<image src="../../static/images/factionalism/Component 1@2x.png" mode=""></image>
											</view>
										</view>
										<view class="comment_content">
											你睡觉好美。
										</view>
										<view class="comment_time">
											<view class="time">
												1分钟前
											</view>
											<view class="reply">
												回复
											</view>
										</view>
									</view>				 -->
								</view>
							</view>
							<view class="pack_up" @click="packUp(item)">
								{{item.pack?'收起':'展开'}}
								<!-- <image src="../../static/images/factionalism/黑色=左, 黑白=on@2x.png" mode=""></image> -->
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<u-popup :closeOnClickOverlay='true' :show="show" mode="bottom" @close="close" @open="open">
			<view class="follow">
				<view class="follow_wapper">
					<view class="inp">
						<u--input placeholder="请输入内容" v-model='commentText' border="none" :focus='isInputFocus'
							:customStyle="{height:'60rpx','background-color': '#f3f3f3','padding':'0 20rpx'}" shape="circle"
							fontSize="28rpx"></u--input>
					</view>
					<view class="send" @click="send">
						发送
					</view>
				</view>
			</view>
		</u-popup>
		<view class="issue" @click="goRelease">
			<view class="issue_text">
				#这一刻想说
			</view>
			<image src="../../static/images/factionalism/Group 156@2x.png" mode=""></image>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		getCircleList,
		issueComment,
		updataLike,
		delCircle
	} from '../../api/index.js'
	export default {
		onLoad() {
			uni.onKeyboardHeightChange(res => {
				console.log(res);
				this.fowheight = res.height
			})
		},
		onShow() {
			uni.hideTabBar()
			this.getCircleDate()
			this.$store.commit('setCircleAddress', '')
			this.$store.commit('setCircleGoods', -1)
		},
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				circleList: [],
				show: false,
				isInputFocus: false,
				fowheight: 0,
				circle: {},
				commentText: '',
				pack: true
			}
		},
		created() {},
		methods: {
			comment(item) {
				if (!this.$store.getters.getIsLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/login/login'
					})
					return
				}
				this.circle = item
				this.show = true
				setTimeout(() => {
					this.isInputFocus = true
				}, 60)
			},
			async getCircleDate() {
				const res = await getCircleList()
				console.log(res);
				if (res.code != 200) {
					return
				}
				const tempCircleList = []
				res.rows.forEach(item => {
					tempCircleList.push({
						...item,
						pack: false,
						height: '140rpx',
						heightType: 'height'
					})
				})
				this.circleList = tempCircleList
			},
			async sendComment(data) {
				const res = await issueComment(data)
				console.log(res);
				if (res.code != 200) {
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.getCircleDate()
			},
			async delCircleInfo(item) {
				const res = await delCircle(item.id)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
					return
				}
				uni.showToast({
					title: res.msg
				})
			},
			packUp(item) {
				if (item.pack) {
					this.$set(item, 'pack', false)
					this.$set(item, 'height', '140rpx')
					this.$set(item, 'heightType', 'height')
				} else {
					this.$set(item, 'pack', true)
					this.$set(item, 'heightType', 'min-height')
					this.$set(item, 'height', 'auto')
				}
			},
			// 用户点赞
			like(item) {
				if (!this.$store.getters.getIsLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/login/login'
					})
					return
				}
				this.circle = item
				this.userLike({
					circleId: this.circle.id,
					followUserId: this.$store.state.userInfo.id,
					followNickName: this.$store.state.user.name
				})
			},
			async userLike(data) {
				const res = await updataLike(data)
				console.log(res);
				if (res.code != 200) {
					return
				}
				uni.showToast({
					title: '已成功点赞'
				})
				this.getCircleDate()
			},
			// 发送评论
			send() {
				this.close()
				this.sendComment({
					circleId: this.circle.id,
					commentUserId: this.$store.state.userInfo.id,
					commentNickName: this.$store.state.user.name,
					other: this.$store.state.user.avatar,
					commentAnswer: this.commentText
				})
				this.commentText = ''
			},

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.isInputFocus = false
			},

			goRelease() {
				if (!this.$store.getters.getIsLogin) {
					uni.navigateTo({
						url: '/pages_mine/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/release-dynamic/release-dynamic'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		min-height: 100vh;
		// padding-bottom: 100rpx;

		.follow {
			background-color: #fff;

			.follow_wapper {
				padding: 20rpx 25rpx;
				display: flex;
				align-items: center;
			}

			.inp {
				flex: 1;

			}

			.send {
				padding-left: 25rpx;
				text-align: center;
				font-size: 30rpx;
				color: #FF594D;
			}
		}

		.article_list {
			// padding-bottom: 100rpx;

			.article_content {
				padding: 10rpx 20rpx;

				.article_item {
					border-bottom: 1rpx solid rgba(170, 170, 170, 0.3);
					padding-bottom: 30rpx;

					.user_info {
						height: 80rpx;
						padding: 20rpx 0;
						display: flex;


						.user_hade {
							width: 80rpx;
							height: 80rpx;
							border-radius: 99rpx;
							overflow: hidden;
							margin-right: 20rpx;

							image {
								width: 80rpx;
								height: 80rpx;
							}
						}

						.user_right {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.username {
								font-size: 26rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 800;
								color: #000000;
							}

							.time {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #777777;
							}
						}
					}

					.article_bttom {
						padding-left: 29rpx;
					}

					.article_text {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #333332;
						padding-bottom: 20rpx;
					}

					.article_image {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						// padding-bottom: 13rpx;

						.image_item {
							width: 220rpx;
							height: 220rpx;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							overflow: hidden;
							margin-bottom: 15rpx;


							image {
								width: 100%;
								height: 100%;
								display: block;
							}
						}
					}

					.user_location {
						display: flex;
						align-items: center;

						image {
							width: 44rpx;
							height: 44rpx;
							display: block;
						}

						text {
							padding-left: 14rpx;
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #777777;
							display: inline-block;
							width: 620rpx;
						}
					}

					.relevance_goods {
						display: flex;
						align-items: center;
						margin-top: 14rpx;

						.relevance {
							padding: 0 14rpx;
							display: flex;
							align-items: center;
							height: 42rpx;
							border-radius: 99rpx;
							background-color: #f3f3f3;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							display: block;
						}

						.goods_name {
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #333332;
							padding-left: 10rpx;
						}
					}

					.article_operation {
						display: flex;
						justify-content: space-between;
						width: 600rpx;
						padding-top: 30rpx;
						padding-bottom: 44rpx;

						.operation_item {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FF594D;

							image {
								width: 44rpx;
								height: 44rpx;
								margin-right: 14rpx;
								display: block;
							}
						}
					}

					.all_article {
						.title {
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #333332;
							padding-bottom: 24rpx;
						}

						.comment_list {
							overflow: hidden;

							.comment_item {
								padding-bottom: 20rpx;
							}

							.comment_user_info {
								display: flex;
								align-items: center;
								height: 60rpx;
								margin-bottom: 15rpx;

								.comment_user_image {
									width: 60rpx;
									height: 60rpx;
									border-radius: 999rpx;
									overflow: hidden;

									image {
										width: 60rpx;
										height: 60rpx;
										display: block;
									}
								}

								.comment_user_name {
									font-size: 26rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									color: #000000;
									margin: 0 16rpx 0 10rpx;
								}

								.comment_user_gender {
									width: 32rpx;
									height: 32rpx;
									border-radius: 999rpx;
									overflow: hidden;

									image {
										width: 100%;
										height: 100%;
										display: block;
									}
								}
							}

							.comment_content {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #777777;
								padding-left: 10rpx;
							}

							.comment_time {
								display: flex;
								align-items: center;
								padding-top: 5rpx;
								padding-left: 10rpx;

								.time {
									font-size: 20rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: rgba(170, 170, 170, 0.5);
									margin-right: 26rpx;
								}

								.reply {
									font-size: 20rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									color: #777777;
								}
							}

							.reply_comment {
								width: 680rpx;
								background: #F6F6F6;
								box-sizing: border-box;
								padding: 16rpx 0 8rpx 30rpx;
								margin-top: 5rpx;
								margin-left: 10rpx;

								.comment_user_info {
									margin: 0;
								}

								.comment_user_image {
									width: 40rpx;
									height: 40rpx;

									image {
										width: 40rpx;
										height: 40rpx;
									}
								}
							}
						}
					}

					.pack_up {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #777777;
						display: flex;
						align-items: center;
						margin-top: 12rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							display: block;
						}
					}
				}
			}
		}

		.issue {

			display: flex;
			position: fixed;
			top: 60%;
			right: 9rpx;

			.issue_text {
				padding: 0 20rpx;
				white-space: nowrap;
				width: 187rpx;
				height: 64rpx;
				line-height: 64rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #FFFFFF;
				background-color: #ff7a71;
				border-radius: 99rpx 0 0 99rpx;
				margin-top: 18rpx;
			}

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>